Skip to content

🐛✨ [Frontend] Improve latest version fetching workflow #7054

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 21 commits into from
Jan 21, 2025
Merged

🐛✨ [Frontend] Improve latest version fetching workflow #7054

merged 21 commits into from
Jan 21, 2025

Conversation

@odeimaiz
Copy link
Member

@odeimaiz odeimaiz commented Jan 17, 2025 •
edited
Loading

What do these changes do?

There is currently a mechanism in place to detect whether the webserver has a different version of frontend compared to the one the user's browser has. If that's the case a "Reload" button, that requests the newest version, is shown to the users.

image

In order to figure out that the user's browser is actually using a cached (different) version, we compare the vcsRefClient stamped in a configuration file (that can be cached) and the vcsRefClient that is included in the response to the /app-summary resource (which is NOT cached).

When the user hits the oSparc's "Reload" button, what oSparc does is add a random query parameter to the cacheable resources, forcing the browser to pull the latest version.

But when the user hits browser's reload button, the old-cached version might be loaded, hence the oSparc's Reload button would show up again, bringing the user to an endless loop:

In the animation:

  • User loads the application: the browser uses the cached version (1)
  • What we execute in the console mimics what oSparc's Reload button does: add the no-cache=random_number query parameter and force the pull of the newest version (2)
  • When the user reloads the browser, the cached version (1) is loaded again...

ReloadButton

In this PR, the application loading pieces were tuned after compilation, making this random query parameter always be present.

nocache

Related issue/s

closes #6697

How to test

Dev-ops checklist

@odeimaiz odeimaiz self-assigned this Jan 17, 2025
@odeimaiz odeimaiz added this to the Singularity milestone Jan 17, 2025
@odeimaiz odeimaiz added the a:frontend issue affecting the front-end (area group) label Jan 17, 2025
@codecov
Copy link

codecov bot commented Jan 17, 2025 •
edited
Loading

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 87.68%. Comparing base (72c7428) to head (73c7740).
Report is 1 commits behind head on master.

Additional details and impacted files 
@@            Coverage Diff             @@
##           master    #7054      +/-   ##
==========================================
- Coverage   87.69%   87.68%   -0.01%     
==========================================
  Files        1629     1629              
  Lines       63454    63454              
  Branches     2047     2047              
==========================================
- Hits        55644    55639       -5     
- Misses       7474     7479       +5     
  Partials      336      336
Flag Coverage Δ *Carryforward flag
integrationtests 64.87% <ø> (ø)
unittests 85.94% <ø> (-0.02%) ⬇️ Carriedforward from 73c3b1c

*This pull request uses carry forward flags. Click here to find out more.

Components Coverage Δ
api 76.84% <ø> (ø)
pkg_aws_library 93.49% <ø> (ø)
pkg_dask_task_models_library 97.09% <ø> (ø)
pkg_models_library 91.45% <ø> (ø)
pkg_notifications_library 84.57% <ø> (ø)
pkg_postgres_database 88.29% <ø> (ø)
pkg_service_integration 70.02% <ø> (ø)
pkg_service_library 73.89% <ø> (ø)
pkg_settings_library 90.49% <ø> (ø)
pkg_simcore_sdk 85.38% <ø> (ø)
agent 96.45% <ø> (ø)
api_server 90.54% <ø> (ø)
autoscaling 96.09% <ø> (ø)
catalog 90.66% <ø> (ø)
clusters_keeper 99.24% <ø> (ø)
dask_sidecar 91.26% <ø> (ø)
datcore_adapter 93.18% <ø> (ø)
director 76.51% <ø> (+0.08%) ⬆️
director_v2 91.29% <ø> (-0.02%) ⬇️
dynamic_scheduler 97.21% <ø> (ø)
dynamic_sidecar 89.75% <ø> (ø)
efs_guardian 90.46% <ø> (ø)
invitations 93.44% <ø> (ø)
osparc_gateway_server ∅ <ø> (∅)
payments 92.66% <ø> (ø)
resource_usage_tracker 89.52% <ø> (-0.12%) ⬇️
storage 89.57% <ø> (ø)
webclient ∅ <ø> (∅)
webserver 86.32% <ø> (-0.02%) ⬇️

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 72c7428...73c7740. Read the comment docs.

@odeimaiz odeimaiz marked this pull request as ready for review January 17, 2025 14:32
@odeimaiz odeimaiz changed the title 🐛✨ [Frontend] Always force hard reload 🐛✨ [Frontend] Automatically pull latest frontend version (nocache) Jan 17, 2025
@calys
Copy link

calys commented Jan 17, 2025

💪

pcrespov
pcrespov approved these changes Jan 17, 2025
View reviewed changes
sanderegg
sanderegg approved these changes Jan 19, 2025
View reviewed changes
Copy link
Member

@sanderegg sanderegg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thanks!

@odeimaiz odeimaiz changed the title 🐛✨ [Frontend] Automatically pull latest frontend version (nocache) 🐛✨ [Frontend] Always fetch latest frontend version (nocache) Jan 20, 2025
ignapas
ignapas approved these changes Jan 20, 2025
View reviewed changes
Copy link
Contributor

@ignapas ignapas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does that mean that now the front-end code is never cached?

@odeimaiz
Copy link
Member Author

odeimaiz commented Jan 20, 2025 •
edited
Loading

does that mean that now the front-end code is never cached?

Nope, with this approach, I believe that every time there is new version, clients will fetch the new code.

The index.html page is never cached. This file points to the boot.js file, but in this PR we are adding a query parameter to it ?no-cache=$vcs_ref_client. This new parameter will force to fetch the new boot.js file every time there is a new release. At the same time, the boot.js file points to the rest of files needed to run the application. The boot.js file also adds the ?nocache=$random_number query parameter to its subresources.

@odeimaiz odeimaiz changed the title 🐛✨ [Frontend] Always fetch latest frontend version (nocache) 🐛✨ [Frontend] Improve latest version fetching workflow (nocache) Jan 20, 2025
@odeimaiz odeimaiz changed the title 🐛✨ [Frontend] Improve latest version fetching workflow (nocache) 🐛✨ [Frontend] Improve latest version fetching workflow Jan 20, 2025
@odeimaiz odeimaiz enabled auto-merge (squash) January 20, 2025 12:43
@sonarqubecloud
Copy link

sonarqubecloud bot commented Jan 21, 2025

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

@odeimaiz odeimaiz merged commit 00d3690 into ITISFoundation:master Jan 21, 2025
88 of 92 checks passed
@odeimaiz odeimaiz mentioned this pull request Jan 23, 2025
Closed
@matusdrobuliak66 matusdrobuliak66 mentioned this pull request Jan 30, 2025
Closed
16 tasks
@matusdrobuliak66 matusdrobuliak66 mentioned this pull request Mar 6, 2025
Closed
63 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@giancarloromeo giancarloromeo giancarloromeo approved these changes

@ignapas ignapas ignapas approved these changes

@pcrespov pcrespov pcrespov approved these changes

@sanderegg sanderegg sanderegg approved these changes

@matusdrobuliak66 matusdrobuliak66 matusdrobuliak66 approved these changes

@jsaq007 jsaq007 Awaiting requested review from jsaq007

@calys calys Awaiting requested review from calys

@GitHK GitHK Awaiting requested review from GitHK

@mguidon mguidon Awaiting requested review from mguidon

Assignees

@odeimaiz odeimaiz

Labels

a:frontend issue affecting the front-end (area group)

Projects

None yet

Milestone

Singularity

Development

Successfully merging this pull request may close these issues.

Endless Loop with Reload Notification

7 participants

@odeimaiz @calys @giancarloromeo @ignapas @pcrespov @sanderegg @matusdrobuliak66